import React , {Component}from 'react';

import {Button,Modal} from 'fly';

import InputBox from '../../common/InputBox.js'
import  Confirm from '../../common/Confirm.js'


export default class Createpart extends React.Component {
    constructor(props){
        super(props);
        this.state = { visible: false ,
                        depName:'',
                        description:''
        }
        this.Style={};
        this.inputText='';
    }

    componentWillMount() {
        this.Style.createpartview={
            textAlign:"center",
            display:"block",
            border:"3px solid green"
        }
        this.Style.createpartview.border = "3px solid red";
        this.Style.createpartview.width = 400;
        this.Style.createpartview.height = 200;
        this.Style.createpartview.fontSize = 30;



        this.Style.headerview={
            width:"634px",
            height:"44px",
            paddingLeft:"18px",
            lineHeight:"44px",
            display:"block",
            background:"#f2f2f2",
            marginBottom:49,


        }
    }

    state = { visible: false }
    showModal = () => {
        this.setState({
            visible: true,
        });
    }
    handleOk = (e) => {
        this.setState({
            visible: false,
        });
    }
    handleCancel = (e) => {
        this.setState({
            visible: false,
        });
    }
    createpart(){
        if(!this.validate('depName')){
            this.setState({
                visible: true,
            });
            return;
        }
        // this.inputText = this.refs.departmentName.state.text;

        let name = this.refs.departmentName.state.text;
        let description = this.refs.departmentdescription.state.text;
        //执行createpart组件的props程序

        this.props.addDepartment(name,description);
        // this.refs.departmentName.setState({
        //     text:"",
        // });
        // this.refs.departmentdescription.setState({
        //     text:"",
        // })
    }

    bluron(type) {
        this.validate(type);
    }

    validate(type){
        let rs=false;
        switch (type) {
            case 'depName':
                let name = this.refs.departmentName.state.text;
                // let rule =/^.{1,20}$/;
                let rule = /^([A-Za-z0-9\u4e00-\u9fa5]){1,20}$/;
                if (name == "") {
                    this.setState({
                        depName: "部门名称不能为空"
                    });
                }else if(!rule.test(name)){
                    this.setState({
                        depName: "部门名称长度为12以内中英字符"
                    });
                } else {
                    this.setState({
                        depName: ""
                    });
                    rs=true;
                }
                return rs;
            case 'departmentdescription':
                let description = this.refs.departmentdescription.state.text.trim();
                var rule =/^.{0,500}$/;
                if(!rule.test(description)){
                    this.setState({
                        description:'部门描述长度不可大于200字符'
                    });
                }else {
                    this.setState({
                        description:''
                    });
                    rs=true;
                }
                return rs;
        }
    }

    render(){
        return (
            <Modal maskClosable={false} className="people_createpart--modal close_style_modal" visible={this.state.visible} onOk={this.createpart.bind(this)} onCancel={this.handleCancel} style={{width:"634px",height:"240px",display:"block"}} title={"新建部门"}>
               <div className="people_crePart--partName">
                   <i className="star1"></i>
                   <span className="title_option"> 部门名称 </span>
                   <InputBox ref={'departmentName'} className="_input__re_margin" maxlength={12} defaultvalute="" isloginintext={true} space="12px"
                             style={{width:283,height:30,borderColor:"#d7d7d7",color:"#999",paddingRight:88}}  bluron={this.bluron.bind(this,'depName')}
                   />
                   <span style={{color:"#ff6f64",position:"absolute",left:285,top:7}}>{this.state.depName}</span>
               </div>

                <div className="people_create--part_des">
                    <span className="title_option"> 部门描述 </span>
                    <InputBox ref={'departmentdescription'} className="_input__re_margin" defaultvalute="" maxlength={200} space="12px"
                              style={{rows:5,width:283,height:115,resize:"none",outline:"none",borderColor:"#d7d7d7",paddingRight:88}}
                              value={this.state.text} multiline={true}  bluron={this.bluron.bind(this,'departmentdescription')}/>
                </div>

                <span style={{color:"#ff6f64",position:"absolute",left:"116px",top:"270px"}}>{this.state.description}</span>
            </Modal>
        )
    }
}





